<template>
  <div>
    <el-card>
      <div slot="header"
           class="clearfix">
        <span>{{title}}</span>
      </div>
      <el-form ref="infoForm"
               :model="infoForm"
               label-position="left"
               label-width="120px"
               class="infos flex">
        <h3 style="width:100%;text-align:center;margin-bottom:15px">基本信息</h3>
        <el-form-item label="物料编号"
                      prop="productCode"
                      style="width:30%">
          <el-input v-model="infoForm.productCode"
                    placeholder="请输入物料编号"
                    :disabled="modify!=0"></el-input>
        </el-form-item>
        <el-form-item label="物料名称"
                      prop="storeName"
                      style="width:30%">
          <el-input v-model="infoForm.storeName"
                    placeholder="请输入物料名称"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="制造商编号"
                      prop="manufacturerCode"
                      style="width:30%">
          <el-input v-model="infoForm.manufacturerCode"
                    placeholder="请输入制造商编号"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="制造商"
                      prop="manufacturer"
                      style="width:30%;">
          <el-input v-model="infoForm.manufacturer"
                    placeholder="请输入制造商"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="无铅标准"
                      prop="standard"
                      style="width:30%">
          <el-input v-model="infoForm.standard"
                    placeholder="请输入无铅标准"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="MSL"
                      prop="level"
                      style="width:30%">
          <el-input v-model="infoForm.level"
                    placeholder="请输入MSL"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="标准交货日期"
                      prop="endData"
                      style="width:30%">
          <el-input v-model="infoForm.endData"
                    placeholder="请输入标准交货日期"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="绑定物料分类"
                      prop="cateId"
                      style="width:30%">
          <el-select v-model="infoForm.cateId"
                     placeholder="请选择物料分类"
                     style="width:100%">
            <el-option v-for="item in tableData"
                       :key="item.id"
                       :label="item.cateName"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=""
                      prop="level"
                      style="width:30%">
        </el-form-item>
        <el-form-item label="产品描述"
                      prop="description"
                      style="width:100%">
          <el-input v-model="infoForm.description"
                    type="textarea"
                    :autosize="{minRows: 2}"
                    placeholder="请输入产品描述"
                    style="width:100%"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <h3 style="width:100%;text-align:center;margin:15px 0">一般信息</h3>
        <el-form-item label="数据列表"
                      prop="dataList"
                      style="width:30%">
          <el-input v-model="infoForm.dataList"
                    placeholder="请输入数据列表"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="标准包装"
                      prop="packStard"
                      style="width:30%">
          <el-input v-model="infoForm.packStard"
                    placeholder="请输入标准包装"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="包装"
                      prop="pack"
                      style="width:30%">
          <el-input v-model="infoForm.pack"
                    placeholder="请输入包装"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="零件状态"
                      prop="partStatus"
                      style="width:30%">
          <el-input v-model="infoForm.partStatus"
                    placeholder="请输入零件状态"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="类别"
                      prop="cateId"
                      style="width:30%">
          <el-input v-model="infoForm.cateId"
                    placeholder="请输入类别"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="产品族系"
                      prop="productZu"
                      style="width:30%">
          <el-input v-model="infoForm.productZu"
                    placeholder="请输入产品族系"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="系列"
                      prop="partXl"
                      style="width:30%">
          <el-input v-model="infoForm.partXl"
                    placeholder="请输入系列"
                    style="width:100%"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
      </el-form>
      <h3 style="width:100%;text-align:center;margin:15px 0">料号信息</h3>

      <el-form ref="productForm"
               :model="infoForm"
               :rules="formRule"
               label-position="right"
               label-width="120px"
               class="infos flex">
        <el-form-item label="产品料号名称"
                      prop="produceName"
                      style="width:40%">
          <el-input v-model="infoForm.liaohaoName"
                    placeholder="请输入产品料号名称"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="产品料号售价"
                      prop="price"
                      style="width:40%;">
          <el-input v-model="infoForm.price"
                    placeholder="请输入产品料号售价"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="产品料号"
                      prop="productNum"
                      style="width:40%;">
          <el-input v-model="infoForm.productNum"
                    placeholder="请输入产品料号"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="料号库存"
                      prop="stock"
                      style="width:40%;">
          <el-input v-model="infoForm.stock"
                    placeholder="请输入料号库存"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="属性名称"
                      prop="attrName"
                      style="width:40%;">
          <el-input v-model="infoForm.attrName"
                    placeholder="请输入属性名称','隔开"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="属性值"
                      prop="attrVal"
                      style="width:40%;">
          <el-input v-model="infoForm.attrVal"
                    placeholder="请输入属性值','隔开，对应属性名称"
                    :disabled='isDisabled'></el-input>
        </el-form-item>
        <el-form-item label="产品料号图片"
                      prop="imageUrl"
                      style="width:40%">
          <el-upload class="avatar-uploader"
                     :show-file-list="false"
                     :multiple="false"
                     :before-upload="beforeUpload"
                     :http-request="httpRequest"
                     action
                     list-type="picture-card">
            <!-- 缩略图 -->
            <div v-if="updateForm.imageUrl"
                 style="height:100%">
              <el-image :src="updateForm.imageUrl"
                        fit="cover"
                        style="width: 100%; height: 100%"></el-image>
            </div>
            <i v-else
               class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="规格书"
                      prop="specsBook"
                      style="width:40%">
          <el-upload class="upload-demo"
                     drag
                     :show-file-list="false"
                     :multiple="false"
                     :before-upload="beforeUploadPdf"
                     :http-request="uploadPdf"
                     action>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              {{updateForm.pdfUrl}} 将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
        <el-form-item label="产品状态"
                      prop="producer"
                      style="width:100%;">
          <el-radio v-model="infoForm.isShow"
                    label="0"
                    :disabled='isDisabled'>未上架</el-radio>
          <el-radio v-model="infoForm.isShow"
                    label="1"
                    :disabled='isDisabled'>上架</el-radio>
        </el-form-item>
        <!-- <el-form-item style="width:100%;"> -->
        <!-- <el-button type="primary" @click="dialogVisible2=true" :disabled='isDisabled'>新增属性</el-button> -->
        <!-- </el-form-item> -->
      </el-form>
      <el-button v-show="!this.detail"
                 size="large"
                 type="primary"
                 style="width:40%"
                 :disabled='isDisabled'
                 @click="addProduct">提交</el-button>
      <el-dialog title="新增属性"
                 :visible.sync="dialogVisible2"
                 width="30%"
                 :before-close="handleClose">
        <el-form :model="infoForm"
                 label-position="right"
                 label-width="100px"
                 style="width:100%">
          <div v-for="(item,index) in newAttrData"
               :key="index"
               class="attrs">
            <el-form-item label="属性名">
              <el-input v-model="item.labelName"
                        placeholder="请输入属性名"
                        style="width:80%"></el-input>
            </el-form-item>
            <el-form-item label="属性值">
              <el-input v-model="item.attrName"
                        placeholder="请输入属性值"
                        style="width:80%"></el-input>
            </el-form-item>
            <i class="el-icon-circle-plus addAttr"
               @click="addAttr"></i>
          </div>
        </el-form>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import {
  PRODUCT_ADD, PRODUCT_UPDATE,
  PRODUCT_IMAGE_FILE, PRODUCT_PDF_FILE, CATEGORY_LIST
} from "@/utils/api";

import axios from 'axios'
export default {
  data () {
    return {
      tableData: [],//物料分类
      detail: false,
      title: "新增物料",
      modify: 0,
      id: 0,
      // 上传
      updateForm: { imageUrl: '', pdfUrl: '' },
      file: null,
      loadings: '',
      hiddenFile: null,
      pdfFile: null,

      isDisabled: false,
      productForm: {
        // liaohaoName:'',
        // price:'',
        // productNum:'',
        // stock:'',
        // isShow:1,
        //  attrName:'',
        //  attrVal:'',
      },
      formRule: {},
      isDisabled: false,
      dialogVisible2: false,
      newAttrData: [{ labelName: "", attrName: "" }],
      newAttrForm: {},
      infoForm: {
        // id:0,
        // cateId:'',
        // productCode:'',
        // storeName:'',
        // manufacturer:'',
        // standard:'',
        // level:'',
        // endData:'',
        // description:'',
        // dataList:'',
        // packStard:'',
        // pack:'',
        // partStatus:'',
        // partClass:'',
        // productZu:'',
        // partXl:'',
        // manufacturerCode,
      },
    };
  },
  mounted () {
    this.queryListAct();
    this.modify = 0
    if (this.$route.query["data"]) {
      this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
      this.detail = this.$route.query['detail'] == 'ok' ? true : false;
      this.infoForm = this.$route.query["data"];
      console.log('++modify if++>', this.infoForm)
      if (this.detail) {
        this.modify = 2
        this.title = '物料详情'
      } else {
        this.modify = 1
        this.title = '修改物料'
      }
      this.id = this.infoForm.id
      if (this.id == null) {
        this.$router.push({
          path: "product"
        });
      }
    }
    console.log('++modify else++>' + this.modify)
  },
  methods: {
    // 列表查询
    queryListAct () {
      CATEGORY_LIST({
      }).then(res => {
        this.tableData = res.data.dataList;
      });
    },
    addAttr () {
      var obj = {
        labelName: "",
        attrName: ""
      };
      this.newAttrData.push(obj);
    },
    // 上传前-拦截上传格式
    beforeUpload (file) {
      console.log('==file==>' + file)
      this.updateForm.imageUrl = ''
      this.hiddenFile = file
    },
    httpRequest () {
      console.log('==httpRequest==>' + this.hiddenFile)
      // this.loadings = this.$pageLoading.service({
      //   lock: true,
      //   text: '正在上传中,请耐心等待',
      //   spinner: 'el-icon-loading'
      // })
      let param = new FormData()  // 创建form对象
      param.append('image', this.hiddenFile)
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      var that = this
      axios.post('http://fox.foxcore.cn/api/v1/file/image/product', param, config)
        .then(response => {
          if (response.data.status === 200) {
            this.imageUrl = response.data.data
            this.updateForm.imageUrl = 'http://oss.dataos.top/' + response.data.data
            this.$message.success('上传图片成功')

          }
          console.log(response.data)
        })
    },

    // 上传前-拦截上传格式
    beforeUploadPdf (file) {
      console.log('==file==>' + file)
      this.updateForm.pdfUrl = ''
      this.pdfFile = file
    },
    uploadPdf () {
      let param = new FormData()  // 创建form对象
      param.append('file', this.pdfFile)
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios.post('http://fox.foxcore.cn/api/v1/file/pdf/product', param, config)
        .then(response => {
          if (response.data.status === 200) {
            this.pdfUrl = response.data.data
            this.updateForm.pdfUrl = 'http://oss.dataos.top/' + response.data.data
            this.$message.success('上传文档成功')
          }
        })
    },
    addProduct () {
      //增加
      if (this.modify == 0) {
        this.addP()
      } else {
        this.updateP()
      }

    },
    addP () {
      PRODUCT_ADD({
        specsBook: this.updateForm.pdfUrl,
        image: this.updateForm.imageUrl,
        productCode: this.infoForm.productCode,
        storeName: this.infoForm.storeName,
        manufacturer: this.infoForm.manufacturer,
        manufacturerCode: this.infoForm.manufacturerCode,
        standard: this.infoForm.standard,
        level: this.infoForm.level,
        endData: this.infoForm.endData,
        description: this.infoForm.description,
        dataList: this.infoForm.dataList,
        packStard: this.infoForm.packStard,
        pack: this.infoForm.pack,
        partStatus: this.infoForm.partStatus,
        partClass: this.infoForm.partClass,
        cateId: this.infoForm.cateId,
        productZu: this.infoForm.productZu,
        partXl: this.infoForm.partXl,
        liaohaoName: this.infoForm.liaohaoName,
        price: this.infoForm.price,
        productNum: this.infoForm.productNum,
        stock: this.infoForm.stock,
        isShow: this.infoForm.isShow,
        attrName: this.infoForm.attrName,
        attrVal: this.infoForm.attrVal,
        cateId: this.updateForm.cateId,
      }).then(res => {
        if (res.status == 200) {
          this.$message.success('操作成功')
          this.$router.push({
            path: "product",
          });
        }
      });
    },
    updateP () {
      PRODUCT_UPDATE({
        id: this.id,
        specsBook: this.updateForm.pdfUrl,
        image: this.updateForm.imageUrl,
        productCode: this.infoForm.productCode,
        storeName: this.infoForm.storeName,
        manufacturer: this.infoForm.manufacturer,
        manufacturerCode: this.infoForm.manufacturerCode,
        standard: this.infoForm.standard,
        level: this.infoForm.level,
        endData: this.infoForm.endData,
        description: this.infoForm.description,
        dataList: this.infoForm.dataList,
        packStard: this.infoForm.packStard,
        pack: this.infoForm.pack,
        partStatus: this.infoForm.partStatus,
        partClass: this.infoForm.partClass,
        cateId: this.infoForm.cateId,
        productZu: this.infoForm.productZu,
        partXl: this.infoForm.partXl,
        liaohaoName: this.infoForm.liaohaoName,
        price: this.infoForm.price,
        productNum: this.infoForm.productNum,
        stock: this.infoForm.stock,
        isShow: this.infoForm.isShow,
        attrName: this.infoForm.attrName,
        attrVal: this.infoForm.attrVal,
      }).then(res => {
        if (res.status == 200) {
          this.$message.success('操作成功')
        }
      });
    },
    checkDetail (row, index) {
      this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "check" //用于判断是详情还是编辑 详情则表单不可编辑
        }
      });
    },
    edit (row, index) {
      this.$router.push({
        path: "addSeries",
        query: {
          data: row,
          handler: "edit" //用于判断是详情还是编辑 详情则表单不可编辑
        }
      });
    },
    del (row, index) { },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
    },
    handleClose (done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.dialogVisible2 = false;
        })
        .catch(_ => { });
    }
  }
};
</script>

<style lang="scss" scoped>
.infos {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 30%;
  }
}
</style>